import streamlit as st

import pandas as pd  # 处理数据
import numpy as np  # 处理数据

# pip  install pandas,numpy -i pip的清华源

st.title("数据展示组件")

# 开始创建 示例数据
np.random.seed(42)  # 随机数

# json   {key:value,}
data = pd.DataFrame({
    "产品": ["手机", "电脑", "平板", "耳机", "手表"],
    "销售额": np.random.randint(1000, 5000, 5),
    "利润": np.random.randint(200, 1000, 5),
    "增长率": np.random.uniform(0.1, 0.5, 5)
})

st.header("1.数据表格展示")
# 交互式dataFrame
st.subheader("交互式DaTaFrame")

st.dataframe(data, use_container_width=True)

# 静态表格


st.subheader("静态表格")
st.table(data.head(3))

# JSON格式显示

st.subheader("json格式显示")

st.json({
    "用户信息": {
        "姓名": "张三",
        "年龄": 28,
        "居住地": "北京"
    },
    "设置": {
        "主题": "暗色",
        "角色": "橘猫"
    }
})

# 指标卡片

st.header("2.指标卡片 展示")
col1, col2, col3 = st.columns(3)

with col1:
    st.metric(
        label="总销售额",
        value="$12345",
        delta="1223(↑12%)",
        delta_color="normal"
    )

with col1:
    st.metric(
        label="用户增长",
        value="$1234",
        delta="1223(↓12%)",
        delta_color="inverse"
    )

with col1:
    st.metric(
        label="zhuan",
        value="$12345",
        delta="2%",
        delta_color="off"
    )
